.setting-box {
  padding: 10px 20px;
  color: #7adaff;
  user-select: none;

  .h3-title {
    font-family: wanju, KaiTi, sans-serif;
  }

  .key-box {
    --key-height: 40px;

    height: 60px;
    width: 100%;
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .key {
      width: 80px;
      height: var(--key-height);
      border-radius: 8px;
      text-align: center;
      line-height: var(--key-height);
      background-color: #0848fd85;
      // box-shadow: inset -0.3166666667vw -0.3166666667vw 0.95vw -0.1583333333vw #bbdbf572,
      //   inset 0.3166666667vw 0.3166666667vw 0.6333333333vw #7a888862;

      &.space-key {
        width: 160px;
      }
      &.bind-key {
        input {
          font-size: 24px;
          text-align: center;
          cursor: pointer;
        }
      }
      &.str-input {
        width: 240px;
      }
    }
    .add {
      font-size: 24px;
    }
    .key + .add,
    .add + .key,
    .key + .key {
      margin-left: 16px;
    }
    .input-box,
    .input-key {
      position: relative;
      width: 140px;
      input {
        padding: 0 8px;
        border: none;
        outline: none;
        background: none;
        color: inherit;
        line-height: var(--key-height);
        width: 100%;
        &::placeholder {
          color: rgb(140, 220, 245);
        }
      }

      .lock-icon {
        position: absolute;
        right: -32px;
        top: 0;
        cursor: pointer;
      }
    }
  }
  .key-box + .key-box {
    margin-top: 0;
  }

  .tools-box {
    padding: 12px 0;
    display: flex;
    flex-direction: row;
    .bind-button {
      width: fit-content;
      padding: 4px 18px;
      border: 2px solid #7adaff;
      border-radius: 16px;
      font-family: wanju, KaiTi, sans-serif;
      cursor: pointer;

      &:hover {
        background-color: rgb(70, 116, 245);
      }
    }
    .bind-button + .bind-button {
      margin-left: 16px;
    }
  }

  .test-input {
    margin-top: 8px;
  }
}
